<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>屏幕锁定</title>
    <style>
        body, html { height: 100%; margin: 0; font-family: 'PingFang SC', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; justify-content: center; align-items: center; }
        .modal { display: flex; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); justify-content: center; align-items: center; }
        .modal-content { background: white; padding: 40px 30px; border-radius: 20px; text-align: center; width: 85%; max-width: 350px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
        .modal-content p { font-size: 20px; margin-bottom: 25px; color: #333; font-weight: bold; }
        .modal-content button { display: block; width: 100%; padding: 18px; margin: 12px 0; border: none; border-radius: 12px; font-size: 18px; cursor: pointer; font-weight: bold; }
        .modal-content button:first-of-type { background: #4CAF50; color: white; }
        .modal-content button:last-of-type { background: #f44336; color: white; }
        .black-screen { display: none; position: fixed; z-index: 200; top: 0; left: 0; width: 100%; height: 100%; background: #000; justify-content: center; align-items: center; color: white; font-size: 24px; font-weight: bold; text-align: center; }
    </style>
</head>
<body>
    <div class="modal">
        <div class="modal-content">
            <p>你准备好了吗？</p>
            <button onclick="chooseOption(1)">是的，我准备好了</button>
            <button onclick="chooseOption(2)">不，我再想想</button>
        </div>
    </div>
    <div id="blackScreen" class="black-screen">
        屏幕已锁定<br><span style="font-size: 16px;">请按电源键唤醒</span>
    </div>
    <script>
        function chooseOption(option) {
            document.querySelector('.modal').style.display = 'none';
            document.getElementById('blackScreen').style.display = 'flex';
            if (navigator.vibrate) navigator.vibrate(100);
            // 黑屏效果会一直保持
        }
    </script>
</body>
</html>